Decompose app into components by elenachernyshova01-cmd · Pull Request #4483 · mate-academy/react_decompose

elenachernyshova01-cmd · 2026-07-03T15:54:19Z

mateacademy-ai-mentor

Review Summary

I am requesting changes because a core requirement of the task is not yet implemented: navigation has not been moved into its own Navigation component with colocated CSS. The <nav className="navigation">…</nav> markup and the .navigation__* styles are still embedded in Header.jsx and Header.css, which violates the requirement to decompose the app by BEM/CSS blocks and place each block in its own component folder. This is a structural, functional requirement, not a cosmetic preference, so it is considered a blocking issue for task completion.

To fix this:

Create a src/components/Navigation/Navigation.jsx file (and Navigation.css) inside a Navigation folder.
Move the navigation markup currently in Header.jsx (the <nav> and its links) into Navigation.jsx, and move the corresponding .navigation__* styles out of Header.css into Navigation.css.
Import and render <Navigation /> from Header.jsx instead of keeping the nav inline, and ensure all new files are added to git [CHECKLIST ITEM #3].
Your decomposition into Welcome, Header, and Article components with separate CSS and default exports is otherwise solid, so once you add and wire up the Navigation component and its styles, your solution should meet the task requirements.

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Important

Fix the issues, commit the changes, and then re-request my review using the Re-request review button² in the Reviewers tab.

Tip

If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag³.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.

Caution

Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.

mateacademy-ai-mentor · 2026-07-03T15:55:50Z

+import Header from './components/Header/Header';
+import Article from './components/Article/Article';


The task description explicitly states you may create a folder for the Navigation component and move navigation there, but currently navigation markup is still inside Header. This violates the requirement to move navigation into its own Navigation component aligned with its CSS block.

mateacademy-ai-mentor · 2026-07-03T15:55:50Z

+.article {
+  margin: 5em auto 0;
+  padding: 1em;
+  font-size: 140%;


The task description requires that navigation be moved into a separate Navigation component (and optionally a dedicated folder), but here the <nav> and its links are still defined inside Header, so navigation has not been decomposed as required.

mateacademy-ai-mentor · 2026-07-03T15:55:51Z

+
+@media (min-width: 500px) {
+  .article {
+    margin: 3.5em auto 0;


Navigation-related styles (e.g., .navigation__link) should be moved into a dedicated Navigation component stylesheet to align with the requirement to split CSS by BEM blocks/components, instead of keeping them in Header.css.

mateacademy-ai-mentor · 2026-07-03T15:55:51Z

+        pellentesque mauris. Aliquam quis malesuada ex. Nullam eu aliquam nibh.
+        Mauris molestie, urna accumsan ornare semper, augue nibh posuere lorem,
+        vitae feugiat sem magna eget massa. Vivamus quis tincidunt dolor. Fusce
+        efficitur, orci non vestibulum consequat, lectus turpis bibendum odio,


The task description requires moving the navigation section into its own Navigation component and folder, but here the <nav className="navigation">…</nav> is still embedded in Header. Consider extracting this into a separate component and importing it into Header to comply with the requirement.

mateacademy-ai-mentor · 2026-07-03T15:55:51Z

+.header {
+  width: 100%;
+  padding: 1em;
+  font-size: 140%;


The navigation markup is still embedded in Header instead of moved into its own Navigation component, which does not satisfy the description requirement: "You may also create a folder for the Navigation component and move navigation there," and the more general rule to split App.js into components based on CSS/BEM blocks (navigation is a separate block).

mateacademy-ai-mentor · 2026-07-03T15:55:51Z

+  font-size: inherit;
+}
+
+.navigation__link {


All navigation-related styles (.navigation__link and its hover/focus states) are kept in Header.css instead of being colocated with a Navigation component; this conflicts with the description that CSS should be split along with the decomposed components (each BEM block’s styles should live with its own component).

mateacademy-ai-mentor · 2026-07-03T15:55:51Z

+      <nav className="navigation">
+        <a className="navigation__link" href="#about">
+          About
+        </a>
+        <a className="navigation__link" href="#services">
+          Services
+        </a>
+        <a className="navigation__link" href="#contact">
+          Contact
+        </a>
+      </nav>


Navigation markup is still defined inline inside Header (<nav className="navigation">…</nav>), while the task expects navigation to be moved into a dedicated Navigation component and folder with its own styles. Consider extracting this into a separate component and importing it here.

mateacademy-ai-mentor · 2026-07-03T15:55:51Z

+}

-// Add a default export statement for Header component to use it in the other files
+export default Header;


The navigation-related styles should be colocated with a dedicated Navigation component rather than living in Header.css, to fully satisfy the requirement of splitting CSS along decomposed BEM/component blocks.

mateacademy-ai-mentor

Review Summary

Your solution is approved because it meets the core functional and structural requirements of the task: App.jsx is correctly decomposed into Welcome, Header, Article, and Navigation components, each in its own folder with colocated CSS and default exports. The navigation has been successfully extracted into a dedicated Navigation component, and Header.jsx now imports and renders <Navigation />, which resolves the earlier blocking issue about inline navigation. CSS is consistently split by BEM blocks (Welcome, Header, Article, Navigation, and global App.css), and there are no violations of the checklist items like overusing empty lines or misplacing component styles.

The remaining points are minor and not blocking: Article.jsx uses an article__title class that currently has no corresponding .article__title rule in Article.css, and Navigation.jsx assigns className="navigation" to <nav> without a .navigation selector in Navigation.css. If you want to refine the implementation further, you can either add minimal styles for these classes or remove them if they’re not needed, to keep your BEM classes and CSS perfectly aligned. Overall, your decomposition, project structure, and styling organization are solid, and you’ve addressed the previous high-priority issues well.

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Rate AI review example ↩

mateacademy-ai-mentor · 2026-07-03T17:01:56Z

+  max-width: 800px;
+  margin: 5em auto 0;
+  padding: 1em;
+


The Article component uses an article__title element, but Article.css doesn’t define any .article__title styles. Since the task requires splitting CSS by BEM blocks and colocating styles per component, consider either styling .article__title here or removing the class if you don’t intend to style it.

mateacademy-ai-mentor · 2026-07-03T17:01:57Z

@@ -1,5 +1,66 @@
-// import a css file containig article styles
+import './Article.css';


The nav element uses className="navigation", but Navigation.css only defines .navigation__link. Since the task requires splitting CSS by BEM blocks and colocating styles with components, consider adding a .navigation rule in this file to style the block root instead of only its elements.

mateacademy-ai-mentor · 2026-07-03T17:01:57Z

+  display: inline-block;
+
+  padding: 0 0.5em;
+


Navigation.jsx assigns className="navigation" to the <nav> element, but Navigation.css doesn’t define a .navigation selector. Since the task requires splitting CSS code by BEM blocks and colocating those styles with the component, consider adding a .navigation rule here to style the block root (or remove the class if you don’t intend to style it).

mateacademy-ai-mentor · 2026-07-03T17:01:57Z

+
+function Navigation() {
+  return (
+    <nav className="navigation">


Navigation uses className="navigation" on the <nav> element, but Navigation.css only defines .navigation__link and its states. Since the task requires splitting CSS by BEM blocks and colocating styles per component, consider adding a .navigation rule here to style the block root, even if it’s minimal.

mateacademy-ai-mentor · 2026-07-03T17:01:57Z

-// Create a Welcome function returning the HTML of welcome block
+function Welcome() {
+  return (
+    <section className="welcome">


Navigation.jsx assigns className="navigation" to the <nav> element, but Navigation.css doesn’t define a .navigation selector. Since CSS should be split by BEM blocks and colocated with the component, consider adding a .navigation rule here so the block root is styled alongside its .navigation__link elements.

Decompose app into components

1202280

mateacademy-ai-mentor suggested changes Jul 3, 2026

View reviewed changes

Create Navigation component

c9cc5de

elenachernyshova01-cmd requested a review from mateacademy-ai-mentor July 3, 2026 17:01

mateacademy-ai-mentor approved these changes Jul 3, 2026

View reviewed changes

		import Header from './components/Header/Header';
		import Article from './components/Article/Article';

		@@ -1,5 +1,66 @@
		// import a css file containig article styles
		import './Article.css';

Uh oh!

Conversation

elenachernyshova01-cmd commented Jul 3, 2026

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants